<script>
    function tracing(xBuckets,yValue) {
        var trace1 = {
            x: xBuckets,
            y: yValue,
            mode: 'markers',
            name: 'Students with Each Score',
            type: 'bar',
            text: yValue,
            textposition: 'auto',
            hoverinfo: 'none',
            marker: {
                color: 'rgb(48,99,152)',
                opacity: 1.0,
                line: {
                    color: 'rbg(170,170,170)',
                    width: 1.5
                }
            }
        };
        var data = [trace1];
        return data;
    }
    function fillBuckets(range,increment,betterBuckets,xValue,yValue,xBuckets,mode,modeCount,max,min){
        if(increment<1){
            increment = 1;
        }
        var loop = Math.ceil(range/increment);
        var tracking = min;
        for(i = 0;i<loop;i++){
            betterBuckets.set(tracking,0);
            tracking+=increment;
            if(i==(loop-1)){
                xBuckets.push(tracking-increment+" to <="+max);
            }
            else{
               xBuckets.push(tracking-increment+" to <"+tracking);
            }
        }
        var maxMin = tracking-increment;
        var ct = 0;
        for(i = 0;i<xValue.length;i++){
           ct++;
           for(var [key,value] of betterBuckets){
                if(key==maxMin){
                    if(xValue[i]>=key&&xValue[i]<=max){
                       betterBuckets.set(key,value+1);
                   }
                }
               else{
                    if(xValue[i]>=key && xValue[i]<(key+increment)){
                        betterBuckets.set(key,value+1);
                    }
                }
           }
        }
        for(var[key,value]of betterBuckets){
            if(value>modeCount){
                modeCount=value;
                mode = key+" to <"+(key+increment);
            }
            yValue.push(value);
        }
        return mode;
    }
    function createNewBuckets(range,buckets,xValue,yValue,xBuckets,mode,modeCount,max,min) {
        var bucketInputTotal = document.getElementById("bucket-size-total");
        var bucketInputAuto = document.getElementById("bucket-size-auto");

        xBuckets = [];
        yValue=[];
        betterBuckets=new Map();
        mode=0;
        modeCount=0;
        {% if overall_average.getAverageScore() != "" %}
            if( bucketInputTotal.value !=''){
                mode=fillBuckets(rangeT,parseInt(bucketInputTotal.value),betterBuckets,xValueT,yValue,xBuckets,mode,modeCount,maxT,minT);
                var dataTotal=tracing(xBuckets,yValue);
                Plotly.newPlot('myDiv', dataTotal, layout, {displayModeBar: false,displaylogo: false});
                bucketInputTotal.value='';
                document.getElementById("mySmallDiv").innerHTML='<b>Mean: </b>'+{{ overall_average.getAverageScore() }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Mode: </b>'
                +mode+'&nbsp&nbsp&nbsp&nbsp'+'<b>Median: </b>'+median+'&nbsp&nbsp&nbsp&nbsp'+ '<b>Maximum: </b>'+maxT+
                '&nbsp&nbsp&nbsp&nbsp'+'<b>Minimum: </b>'+minT+'&nbsp&nbsp&nbsp&nbsp'+'<b>Standard Deviation: </b>'+
                {{ overall_average.getStandardDeviation()  }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Range: </b>'+rangeT;
                return mode;
            }
        {% endif %}
        {% if autograded_average != null or autograded_average.getCount() != 0  %}
            if(bucketInputAuto.value!=''){
                mode=fillBuckets(range,parseInt(bucketInputAuto.value),betterBuckets,xValue,yValue,xBuckets,mode,modeCount,max,min);
                var dataAuto = tracing(xBuckets,yValue);
                Plotly.newPlot('myDiv3', dataAuto, layout, {displayModeBar: false,displaylogo: false});
                bucketInputAuto.value='';
                document.getElementById("mySmallDiv3").innerHTML='<b>Mean: </b>'+{{ autograded_average.getAverageScore() }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Mode: </b>'
                +mode+'&nbsp&nbsp&nbsp&nbsp'+'<b>Median: </b>'+median+'&nbsp&nbsp&nbsp&nbsp'+ '<b>Maximum: </b>'+max+
                '&nbsp&nbsp&nbsp&nbsp'+'<b>Minimum: </b>'+min+'&nbsp&nbsp&nbsp&nbsp'+'<b>Standard Deviation: </b>'+
                {{ autograded_average.getStandardDeviation()  }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Range: </b>'+range;
                return mode;
            }
        {% endif %}
        var bucketSize = Math.floor(range/10);
        mode=fillBuckets(range,bucketSize,betterBuckets,xValue,yValue,xBuckets,mode,modeCount,max,min);
        return  mode;
    }
</script>
<body onload="document.getElementById('defaultOpen').click();">
<div class = "content">
    <h1>Status of {{ gradeable_title }}</h1>

    {% if rotating_sections_error %}
        <div name="grader-warning-popup status">
            <p> WARNING: This page may be inaccurate.  <br />
                This gradeable assigns graders by Rotating Section, but Rotating Sections are not set up properly. <br />
                To fix Rotating Sections, go to the Manage Sections page. <br />
            </p>
        </div>
    {% endif %}

    {# Top buttons #}
    <div style="margin-top: 20px; vertical-align:bottom;">
        {% if graded_percentage != -1 or core.getUser().accessFullGrading() or peer %}
            <a class="btn btn-primary" style="float: left"
                {% if core.getUser().accessAdmin() or (core.getUser().getGradingRegistrationSections()|length == 0) %}
                    href="{{ details_view_all_url }}">
                {% else %}
                    href="{{ details_url }}">
                {% endif %}

                Grading Index
            </a>
            <ul style="margin-left: 25px; margin-top: -5px; float: left">
                <li>View Submissions</li>
                {%  if team_assignment %}
                    <li>Manage Teams</li>
                {% endif %}
                {% if component_averages|length != 0 %}
                    <li>Manual Grading</li>
                    <li>Grade Inquiries</li>
                {% endif %}
            </ul>
            {% if core.getUser().getGradingRegistrationSections()|length != 0 %}
                {% if overall_average == null or overall_average.getCount() == 0 %}
                    {% if team_assignment %}
                        <a class="btn btn-primary"
                           href="{{ grade_url }}" style="float: right;">
                            My Next Ungraded Team
                        </a>
                    {% else %}
                        <a class="btn btn-primary"
                           href="{{ grade_url }}" style="float: right;">
                            My Next Ungraded Student
                        </a>
                    {% endif %}
                {% endif %}
            {% endif %}
        {% endif %}
    </div>
    {# /Top Button #}


</div>
<div class = "content">
    {% if graded_percentage == -1 %}
        <div class="sub">
            No Grading To Be Done! :)
        </div>
    {% else %}
        <div class = "tab">
            <div class =tab-bar-wrapper">
                <a class="nav-bar normal-btn"  onclick="openStat(event, 'numerical-data'), this.blur()" id="defaultOpen">Data</a>
                <a class="nav-bar normal-btn"  id="btn-hist-auto" onclick="openStat(event, 'autograding-score-histogram'), this.blur()">Autograding Histogram</a>
                <a class="nav-bar normal-btn"  id="btn-comp" onclick="openStat(event, 'component-averages'), this.blur()">Manual Grading Component Averages</a>
                <a class="nav-bar normal-btn"  id="btn-hist-tot" onclick="openStat(event, 'total-score-histogram'), this.blur()">Overall Histogram</a>
            </div>
            {% set bTA = [] %}
            {% set tTA = [] %}
            {% set bAuto = [] %}

            {% set VerConf = 0 %}
            {% set noSub = 0 %}
            {% set noActive = 0 %}
            {% set GradeInq = 0 %}
            {% set IncompGrading = 0 %}
            {% set cancelledSub = 0 %}
            {# Iterate through all the Scores #}
            {% for ov in overall_scores %}
                {# If Autograded, add the points to the array of autograded scores#}
                {% if ov.getAutoGradedGradeable().getHighestVersion() != 0 %}
                    {% if ov.getTaGradedGradeable.getGradedGradeable.getSubmitter().getRegistrationSection() != NULL %}
                        {% if ov.getGradeable().getAutogradingConfig().getTotalNonExtraCredit() != 0  %}
                            {% if ov.getAutoGradedGradeable().getTotalPoints() >=0 or ov.getAutoGradedGradeable().getTotalPoints() <0 %}
                                {%  set bAuto = bAuto|merge( [ov.getAutoGradedGradeable().getTotalPoints() ]) %}
                            {% else %}
                                {% set cancelledSub = cancelledSub+1 %}
                            {% endif %}
                        {% endif %}
                    {% endif %}
                {% else %}

                {% endif %}

                {% if not ov.getAutoGradedGradeable().hasSubmission() %}
                    {# if no submission and not in Null section add to count #}
                    {% if ov.getTaGradedGradeable.getGradedGradeable.getSubmitter().getRegistrationSection() != NULL %}
                        {% set noSub = noSub +1 %}
                    {% endif %}
                {% elseif ov.getAutoGradedGradeable().getActiveVersion() == 0 %}
                    {# if no active version and not in Null section add to count #}
                    {% if ov.getTaGradedGradeable.getGradedGradeable.getSubmitter().getRegistrationSection() != NULL %}
                        {% set noActive = noActive + 1 %}
                    {% endif %}
                {% elseif ov.getGradeable().isTaGrading() %}
                    {% if ov.getOrCreateTaGradedGradeable().anyGrades() %}
                        {# if grade inquiry and not in Null section add to count #}
                        {% if ov.hasActiveRegradeRequest() %}
                            {% if ov.getTaGradedGradeable.getGradedGradeable.getSubmitter().getRegistrationSection() != NULL %}
                                {% set noActive = noActive+1 %}
                            {% endif %}
                        {% elseif ov.getTaGradedGradeable().hasVersionConflict() %}
                            {# if version conflict and not in Null section add to count #}
                            {% if ov.getTaGradedGradeable.getGradedGradeable.getSubmitter().getRegistrationSection() != NULL %}
                                {% set VerConf = VerConf +1 %}
                            {% endif %}

                        {% elseif not ov.isTaGradingComplete() %}
                            {# if assignment incomplete and not in Null section add to count #}
                            {% set IncompGrading = IncompGrading +1 %}
                        {% elseif ov.isTaGradingComplete() %}
                            {# otherwise add the overall grade to array and total score possible to array (possible future use) #}
                            {% if ov.getTaGradedGradeable.getGradedGradeable.getSubmitter().getRegistrationSection() != NULL %}
                                {% set bTA = bTA|merge( [ ov.getTaGradedGradeable.getTotalScore()  ]) %}
                                {% set tTA = tTA|merge( [ ov.getGradeable().getTaPoints() ]) %}

                            {% endif %}
                        {% endif %}
                    {% endif %}
                {% endif %}
            {% endfor %}
            {% if (overall_average == null or overall_average.getCount() == 0) and component_averages|length == 0%}
                <script>
                    document.getElementById("btn-hist-tot").className+= " disabled-btn";
                    document.getElementById("btn-hist-tot").style.visibility = "hidden";
                </script>

            {% else %}
                <div id = "total-score-histogram" class = "page-content">
                {# Setup for Histogram of Total Scores #}
                    <br>
                    <input style='width: auto' type='text' id='bucket-size-total' name='bucket-val' value="" placeholder="Enter bucket size" />
                    <input name="sub-tot" class="btn btn-primary" id="submit_bucket" type="submit" value="Submit Bucket Size for Total" onclick="createNewBuckets(rangeT,betterBuckets,xValueT,yValue,xBuckets,mode,modeCount,maxT,minT)"/>
                <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

                <script>

                    var betterBuckets = new Map();
                    var buttonLayerHeight = 1.0;
                    var ct = 0;
                    var maxT = 0;
                    var minT = {{ overall_total }} + 50;
                    var median = 0;
                    var mode = 0;
                    var modeCount = 0;
                    var rangeT = 0;

                    var xValueT = [{{ bTA | join(',') }}];
                    xValueT.sort((a, b) => a - b);
                    var yValue = [];
                    var yValue2 = [];
                    var xBuckets = [];

                    if (xValueT.length > 0) {
                        minT = xValueT[0];
                        maxT = xValueT[xValueT.length-1];
                        rangeT = maxT - minT;
                        let pivot = Math.floor((xValueT.length - 1) / 2);
                        if (xValueT.length % 2 === 0) {
                            median = (xValueT[pivot] + xValueT[pivot+1]) / 2;
                        }
                        else {
                            median = xValueT[pivot];
                        }
                    }

                    var bucketSize = Math.floor(rangeT/10);
                    mode = fillBuckets(rangeT, bucketSize, betterBuckets, xValueT, yValue, xBuckets, mode, modeCount, maxT, minT);

                    if (maxT==0 && minT==50) {
                        minT=0;
                    }

                    var trace1 = {
                        x: xBuckets,
                        y: yValue,
                        mode: 'markers',
                        name: 'Students with Each Score',
                        type: 'bar',
                        text: yValue,
                        textposition: 'auto',
                        hoverinfo: 'none',
                        marker: {
                            color: 'rgb(48,99,152)',
                            opacity: 1.0,
                            line: {
                                color: 'rbg(170,170,170)',
                                width: 1.5
                            }
                        }
                    };

                    var data = [trace1];

                    var layout = {
                        title: 'Students with Each Score',
                        xaxis: {
                            title: 'Scores'
                        },
                        yaxis:{
                            title: 'Number of Students'
                        },
                        barmode: 'overlay',
                        font: {
                            family: '"Source Sans Pro", sans-serif',
                        }
                    };

                    Plotly.newPlot('myDiv', data, layout, {displayModeBar: false,displaylogo: false});

                </script>
                <div id="mySmallDiv">
                    <script>
                        document.write('<b>Mean: </b>'+{{ overall_average.getAverageScore() }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Mode: </b>'
                        +mode+'&nbsp&nbsp&nbsp&nbsp'+'<b>Median: </b>'+median+'&nbsp&nbsp&nbsp&nbsp'+ '<b>Maximum: </b>'+maxT+
                        '&nbsp&nbsp&nbsp&nbsp'+'<b>Minimum: </b>'+minT+'&nbsp&nbsp&nbsp&nbsp'+'<b>Standard Deviation: </b>'+
                        {{ overall_average.getStandardDeviation()  }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Range: </b>'+rangeT);
                    </script>
                </div>
                <br />
                Version Conflicts: {{ VerConf }}
                <br />
                No Submissions: {{ noSub }}
                <br />
                No Active Versions: {{ noActive }}
                <br />
                Grade Inquiries: {{ GradeInq }}
                <br />
                Incomplete Grading: {{ IncompGrading }}
                <br />
                Cancelled Submissions: {{ cancelledSub }}
                <br/>
                <br/>
                Double-click on the chart to zoom out
                <hr>
            </div>
            {% endif %}


            {# Setup for Component Average Graphs#}


                {% if component_averages|length == 0 %}
                    <script>
                        document.getElementById("btn-comp").className+= " disabled-btn";
                        document.getElementById("btn-comp").style.visibility = "hidden";
                    </script>
                {% else %}

                <div id="component-averages" class="page-content">

                    <div id="myDiv2"><!-- Plotly chart will be drawn inside this DIV --></div>
                    <script>

                        var xValue = [];
                        var yValue = [];
                        var yValue2 = [];
                        {% for comp in component_averages %}
                            xValue.push('{{comp.getTitle()|escape("js")}}');
                            yValue.push({{comp.getAverageScore()}});
                            yValue2.push({{comp.getMaxValue()}});
                        {% endfor %}


                        var trace1 = {
                            x: xValue,
                            y: yValue,
                            name: 'Average Scores',
                            type: 'bar',
                            text: yValue,
                            textposition: 'auto',
                            hoverinfo: 'none',
                            marker: {
                                color: 'rgb(48,99,152)',
                                opacity: 1.0,
                                line: {
                                    color: 'rbg(170,170,170)',
                                    width: 1.5
                                }
                            }
                        };

                        var trace2 = {
                            x: xValue,
                            y: yValue2,
                            name: 'Full Scores',
                            type: 'bar',
                            text: yValue2,
                            textposition: 'auto',
                            hoverinfo: 'none',
                            marker: {
                                color: 'rgb(246,251,252)',
                                opacity: 1.0,
                                line: {
                                    color: 'rbg(170,170,170)',
                                    width: 1.5
                                }
                            }
                        };

                        var data = [trace2, trace1];

                        var layout = {
                            title: 'Manually Graded Component Averages',
                            barmode: 'overlay',
                            xaxis: {
                                title: 'Components'
                            },
                            yaxis:{
                                title: 'Scores'
                            },
                            font: {
                                family: '"Source Sans Pro", sans-serif',
                            }

                        };

                        Plotly.newPlot('myDiv2', data, layout, {displayModeBar: false,displaylogo: false});
                    </script>
                     <br/>
                    <br/>
                    Double-click on the chart to zoom out
                    <hr>
                </div>
                {% endif %}
            {# Graph Setup for Autograding #}

                {% if autograded_average == null or autograded_average.getCount() == 0 or bAuto|length == 0 %}
                    <script>
                        document.getElementById("btn-hist-auto").className+= " disabled-btn";
                        document.getElementById("btn-hist-auto").style.visibility = "hidden";
                    </script>

                {% else %}

                <div id="autograding-score-histogram" class="page-content">
                    <br>
                    <input style='width: auto' type='text' id='bucket-size-auto' name='bucket-val' value="" placeholder="Enter bucket size" />
                    <input name = "sub-auto" class="btn btn-primary" id="submit_bucket_auto" type="submit" value="Submit Bucket Size for Auto" onclick="createNewBuckets(rangeA,buckets,xValue,yValue,xBuckets,mode,modeCount,maxA,minA)"/>
                    <div id="myDiv3"><!-- Plotly chart will be drawn inside this DIV --></div>
                    <script>
                        var buckets = new Map();
                        var buttonLayerHeight = 1.0;
                        var ct = 0;
                        var maxA = 0;
                        var minA = {{ overall_total }} + 50;
                        var median = 0;
                        var mode = 0;
                        var modeCount = 0;
                        var rangeA = 0;

                        var xValue = [];
                        var yValue = [];
                        var xBuckets = [];

                        xValue = [{{ bAuto | join(',') }}]
                        xValue.sort((a, b) => a - b);
                        if (xValue.length > 0) {
                            minA = xValue[0];
                            maxA = xValue[xValue.length - 1];
                            let pivot = Math.floor((xValue.length - 1) / 2);
                            if (xValue.length % 2 === 0) {
                                median = (xValue[pivot] + xValue[pivot+1]) / 2;
                            }
                            else {
                                median = xValue[pivot];
                            }
                        }

                        if (maxA!=0 && minA!=50) {
                            rangeA = maxA-minA;
                        }

                        var bucketSize = Math.floor(rangeA/10);
                        mode = fillBuckets(rangeA,bucketSize,buckets,xValue,yValue,xBuckets,mode,modeCount,maxA,minA);

                        if (minA==50 && maxA==0) {
                            minA=0;
                        }

                        var trace1 = {
                            x: xBuckets,
                            y: yValue,
                            name: 'Students with Each Score',
                            mode: 'markers',
                            type: 'bar',
                            text: yValue,
                            textposition: 'auto',
                            hoverinfo: 'none',
                            marker: {
                                color: 'rgb(48,99,152)',
                                opacity: 1.0,
                                line: {
                                    color: 'rbg(170,170,170)',
                                    width: 1.5
                                }
                            }
                        };

                        var data = [trace1];

                        var layout = {
                            title: 'Students with Each Score',
                            barmode: 'overlay',
                            xaxis: {
                                title: 'Scores'
                            },
                            yaxis:{
                                title: 'Number of Students'
                            },
                            font: {
                                family: '"Source Sans Pro", sans-serif',
                            }
                        };

                        Plotly.newPlot('myDiv3', data, layout, {displayModeBar: false,displaylogo: false});

                    </script>
                    <div id="mySmallDiv3">
                        <script>
                            document.write('<b>Mean: </b>'+{{ autograded_average.getAverageScore() }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Mode: </b>'
                            +mode+'&nbsp&nbsp&nbsp&nbsp'+'<b>Median: </b>'+median+'&nbsp&nbsp&nbsp&nbsp'+ '<b>Maximum: </b>'+maxA+
                            '&nbsp&nbsp&nbsp&nbsp'+'<b>Minimum: </b>'+minA+'&nbsp&nbsp&nbsp&nbsp'+'<b>Standard Deviation: </b>'+
                            {{ autograded_average.getStandardDeviation()  }}+'&nbsp&nbsp&nbsp&nbsp'+'<b>Range: </b>'+rangeA);
                        </script>
                    </div>

                    <br />
                    Version Conflicts: {{ VerConf }}
                    <br />
                    No Submissions: {{ noSub }}
                    <br />
                    No Active Versions: {{ noActive }}
                    <br />
                    Grade Inquiries: {{ GradeInq }}
                    <br />
                    Incomplete Grading: {{ IncompGrading }}
                    <br />
                    Cancelled Submissions: {{ cancelledSub }}
                    <br/>
                    <br/>
                    Double-click on the chart to zoom out
                    <hr>
                </div>
                {% endif %}


            <div id="numerical-data" class="page-content">
                <div class = "row">
                    <div class = "box col-md-6">
                        {# LEFT CHUNK#}
                        {% if warnings|length > 0 %}
                            <ul>
                                {% for warning in warnings %}
                                    <li style="color:red; margin-left:1em">{{ warning }}</li>
                                {% endfor %}
                            </ul>
                            <br/>
                        {% endif %}

                        {% if team_assignment %}
                            <br/>
                            <b>Students on a team:</b> {{ team_total }}/{{ total_students }} ({{ team_percentage }}%)
                            <br/>
                            <br/>
                            <b>Number of teams:</b> {{ total_submissions }}
                            <br/>
                            <br/>
                            <b>Teams who have submitted:</b> {{ submitted_total }} / {{ total_submissions }} ({{ submitted_percentage }}%)
                        {% else %}
                            <br/>
                            <b>Students who have submitted:</b>  {{ submitted_total }} / {{ total_submissions }} ({{ submitted_percentage }}%)
                            <br/>
                            <br/>
                            <b>Current percentage of grading done:</b> {{ graded_total }} / {{ submitted_total }} ({{ graded_percentage }}%)
                        {% endif %}

                        <br/>
                        <br/>
                        {% if peer %}
                            <b>Current percentage of students grading done:</b> {{ peer_percentage }}% ({{ peer_graded }}/{{ peer_total }})
                        {% else %}
                            <b>By Grading Sections:</b>
                            <div style="margin-left: 20px">
                                {% for key, section in sections %}
                                    Section {{ key }}: {{ section.graded }} / {{ section.total }} ({{ section.percentage }}%)<br />
                                {% endfor %}
                            </div>
                            <br/>
                            <b>Graders:</b>
                            <div style="margin-left: 20px">
                                {% for key, section in sections %}
                                    Section {{ key }}:
                                    {% if section.valid_graders|length == 0 %}
                                        Nobody
                                    {% else %}
                                        {{ section.valid_graders | join(", ") }}
                                    {% endif %}
                                    <br/>
                                {% endfor %}
                            </div>
                        {% endif %}

                        {% if ta_grades_released %}
                            {% if team_assignment %}
                                <br/>
                                <b>Number of teams where at least one member viewed their grade:</b> {{ viewed_grade }} / {{ viewed_total }} ({{ viewed_percent }}%)
								<b>Number of students who have viewed their grade:</b>
									{{ individual_viewed_grade }} / {{ total_students_submitted }} ({{ individual_viewed_percent }}%)
                            {% else %}
                                <br/>
                                <b>Number of students who have viewed their grade:</b> {{ viewed_grade }} / {{ viewed_total }} ({{ viewed_percent }}%)
                            {% endif %}
                        {% endif %}

                        {% if regrade_allowed and not peer %}
                            <br/>
                            <br/>
                            <p><b>Number of unresolved grade inquiries:</b> {{ regrade_requests }}</p>
                            {% if grade_inquiry_per_component_allowed %}
                                {% for component in component_averages %}
                                    <p><b>Number of unresolved grade inquiries for {{ component.getTitle() }}:</b> {{ component.getActiveGradeInquiryCount() }} </p>
                                {% endfor %}
                            {% endif %}
                        {% endif %}
                        {# LEFT CHUNK #}
                    </div>
                    <div class = "box col-md-6">
                        {# RIGHT CHUNK#}
                        {% if not peer %}
                            <br>
                            <b>Statistics for Completely Graded Assignments: </b>
                            <br/>
                            <div style="margin-left: 20px">
                                {% if overall_average == null or overall_average.getCount() == 0 %}
                                    No assignments have been completely graded yet.
                                {% else %}
                                    Average: {{ overall_average.getAverageScore() }} / {{ overall_total }} ({{ overall_percentage }}%)<br/>
                                    Standard Deviation: {{ overall_average.getStandardDeviation() }} <br/>
                                    Count: {{ overall_average.getCount() }} <br/>
                                {% endif %}
                            </div>
                            {% if autograding_non_extra_credit != 0 %}
                                {# Only show autograder if we have autograding points #}
                                <br/>
                                <b>Statistics for Autograding: </b>
                                <br/>
                                <div style="margin-left: 20px">
                                    {% if autograded_average == null or autograded_average.getCount() == 0 %}
                                        No assignments have been submitted yet.
                                    {% else %}
                                        Average: {{ autograded_average.getAverageScore() }} / {{ autograding_non_extra_credit }} ({{ autograded_percentage }}%)<br/>
                                        Standard Deviation: {{ autograded_average.getStandardDeviation() }} <br/>
                                        Count: {{ autograded_average.getCount() }} <br/>
                                    {% endif %}
                                </div>
                            {% endif %}
                            <br/>
                            <b>Statistics for Manually Graded Components: </b>
                            <br/>
                            <div style="margin-left: 20px">
                                {% if component_averages|length == 0 %}
                                    No components have been graded yet.
                                {% else %}
                                    {% for component in component_averages %}
                                        {{ component.getTitle() }}:<br/>
                                        <div style="margin-left: 40px">
                                            Average:
                                            {% if component.getMaxValue() > 0 %}
                                                {{ component.getAverageScore() }} / {{ component.getMaxValue() }} ({{ component_percentages[loop.index0] }}%)
                                            {% else %}
                                                {{ component.getAverageScore() }}
                                            {% endif %}
                                            <br/>
                                            Standard Deviation: {{ component.getStandardDeviation() }} <br/>
                                            Count: {{ component.getCount() }} <br/>
                                        </div>
                                    {% endfor %}
                                    <br/>
                                    Overall Average: {{ component_overall_score }} / {{ component_overall_max }} ({{ component_overall_percentage }}%)
                                {% endif %}
                            </div>
                        {% endif %}
                        {# RIGHT CHUNK #}
                    </div>


                </div>

            </div>
        </div>
    {% endif %}
    <div style="margin-top: 20px;">
        {% if graded_percentage != -1 or core.getUser().accessFullGrading() or peer %}
            {% if core.getUser().getGradingRegistrationSections()|length != 0 %}
                {%  if team_assignment %}
                    <a class="btn btn-primary"
                       href="{{ download_zip_url }}">
                        Download Zip of Assigned Teams
                    </a>
                {% else %}
                    <a class="btn btn-primary"
                       href="{{ download_zip_url }}">
                        Download Zip of Assigned Students
                    </a>
                {% endif %}

            {% endif %}
            {% if core.getUser().accessFullGrading() and submitted_total %}
                <a class="btn btn-default"
                   href="{{ download_zip_url }}?type=all">
                    Download Zip of All Students
                </a>
            {% endif %}
            {% if core.getUser().accessFullGrading() %}
                <a class="btn btn-default"
                   href="{{ bulk_stats_url }}"style="float: right">
                    Bulk Upload Forensics
                </a>
            {% endif %}
        {% endif %}
    </div>
</div>
</body>
{# Tab Buttons #}
<script>

    function openStat(evt, statName) {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("page-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }


        // Get all elements with class="btn btn-primary" and remove the class "active"
        tablinks = document.getElementsByClassName("nav-bar");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active-btn", "");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(statName).style.display = "block";
        evt.currentTarget.className += " active-btn";

    }
    // Get the element with id="defaultOpen" and click on it
    let defaultOpen = document.getElementById('defaultOpen');
    if (defaultOpen) {
        defaultOpen.click();
    }
</script>
